<template>
  <div class="intent-mining-page">
    <div class="title">
      <div class="iconTip">知识管理-基础指标管理</div>
    </div>
    <div class="search">
      <SearchList
        :searchList="searchList"
        :searchData="searchData"
        @search="search"
        @reSet="reSet"
        @updateSearchData="updateSearchData"
        :option="option"
      ></SearchList>
    </div>
    <div class="btn">
      <div class="btn-item" @click="batchUpFile">
        <a-icon type="cloud-upload" />
        批量上传
      </div>
      <div class="btn-item" @click="addDataOperation('新增-基础指标管理单')">
        <a-icon type="plus-square" />
        新增
      </div>
      <div class="btn-item" @click="deleteDataObj">
        <a-icon type="delete" />
        删除
      </div>
    </div>
    <MyTable
      :data-source="tableData"
      :columns="columns"
      row-key="id"
      :pageNo.sync="pageNo"
      :pageSize.sync="pageSize"
      :total="total"
      :userId="userId"
      :roleType="roleType"
      :mySelectedRowKeys="deleteId"
      @updateDeleteId="updateDeleteId"
      :slotName="['comment_status']"
    >
      <template #comment_status="scope">
        <span :style="{ color: getCommentStatus(scope).color }">
          {{ getCommentStatus(scope).status }}
        </span>
      </template>
      <template #operation="scope">
        <span class="operate">
          <span
            class="operate-item"
            @click="
              previewDataOperation(
                scope.data.record,
                true,
                '查看-基础指标管理单'
              )
            "
          >
            查看
          </span>
          <span
            class="operate-item"
            @click="
              updateStatus(scope.data.record.editor)
                ? editDataOperation(
                    scope.data.record,
                    false,
                    '修改-基础指标管理单',
                    true
                  )
                : noAuthInfo()
            "
          >
            修改
          </span>
          <span
            class="operate-item"
            @click="
              updateStatus(scope.data.record.editor)
                ? deleteDataObj(scope.data.record, true)
                : noAuthInfo()
            "
          >
            删除
          </span>
          <span
            v-if="roleType"
            class="operate-item"
            @click="openCommentModal(scope.data.record, true)"
          >
            评审
          </span>
        </span>
      </template>
    </MyTable>
    <div class="table-paging">
      <a-pagination
        :current="pageNo"
        :total="total"
        :show-total="(total) => `共有 ${total} 条`"
        :page-size-options="['15', '20', '30', '50']"
        :page-size="pageSize"
        show-quick-jumper
        show-size-changer
        @change="change"
        @showSizeChange="change"
      />
    </div>
    <a-modal
      v-model="visible"
      :footer="null"
      :title="title"
      centered
      width="70%"
    >
      <CommonModal
        :formKey="formKey"
        :formData="formData"
        :option="option"
        :disable="disable"
        :title="title"
        :editNameBack="editNameBack"
        :tableName="tableName"
        :dimensionCode="dimensionCode"
        @updateFormData="updateFormData"
        @offModalOperation="offModal"
        @submitModal="submit"
      />
    </a-modal>
    <FileUpload
      :id="id"
      :userId="userId"
      fileName="基础指标管理批量上传模板.xlsx"
      type="2"
      :fileVisible="fileVisible"
      @offFileModal="offFileModal"
    />
    <a-modal
      v-model="visiblePreview"
      :footer="null"
      :title="title"
      centered
      width="70%"
    >
      <CommonPreviewModal
        :formKey="formKey"
        :formData="formData"
        :option="option"
      />
    </a-modal>
    <a-modal
      v-model="commentVisible"
      :footer="null"
      :title="commentTitle"
      centered
      width="70%"
    >
      <UserCommentModal
        :commentForm="commentForm"
        @updateFormData="updateCommentFormData"
        @offModalOperation="cancelCommentModal"
        @submitModal="userComment"
        :formKey="formKey"
        :formData="formData"
        :option="option"
        name="基础指标"
      />
    </a-modal>
  </div>
</template>

<script setup>
import SearchList from "@/components/common/search-list.vue";
import MyTable from "@/components/common/my-table.vue";
import CommonModal from "@/components/common/common-modal.vue";
import CommonPreviewModal from "@/components/common/common-preview-modal.vue";
import UserCommentModal from "@/components/common/user-comment.vue";

import FileUpload from "@/components/common/file-upload.vue";
import { computed, onMounted, ref, watch } from "vue";
import { basicIndexManagement } from "@/store/basic-index-management";
import { storeToRefs } from "pinia";
import { commonStore } from "@/store/common-store";
import { Modal } from "ant-design-vue";
const { roleType, userId } = storeToRefs(commonStore());
const store = basicIndexManagement();
const {
  disableStatus,
  commentForm,
  commentVisible,
  commentTitle,
  tableData,
  columns,
  pageNo,
  pageSize,
  total,
  searchList,
  formData,
  searchData,
  formKey,
  deleteId,
  title,
  visible,
  disable,
  option,
  dimensionCode,
  tableName,
  editNameBack,
  id,
  visiblePreview,
} = storeToRefs(store);
const change = (page, pageSize1) => {
  pageNo.value = page;
  pageSize.value = pageSize1;
};
const getCommentStatus = (scope) => {
  let status = "";
  let color = "";
  let comment = scope.data?.text;
  if (comment === ""|| comment === "-1") {
    status = "未评审";
  } else if (comment === "0") {
    status = "不通过";
    color = "#ff0000";
  } else if (comment === "1") {
    status = "通过";
    color = "#00c175";
  }
  return {
    status,
    color,
  };
};
const {
  reSet,
  userComment,
  openCommentModal,
  updateCommentFormData,
  cancelCommentModal,
  getSearchData,
  getFormList,
  addDataOperation,
  editDataOperation,
  deleteDataObj,
  getTheadData,
  getTbodyData,
  search,
  updateSearchData,
  updateDeleteId,
  updateFormData,
  offModal,
  submit,
  previewDataOperation,
} = store;
watch(
  [pageNo, pageSize],
  async () => {
    await getTbodyData();
  },
  { immediate: false }
);
function noAuthInfo() {
  Modal.info({
    title: "提示",
    content: "开发人员只能修改或删除自己创建的数据",
    centered: true,
  });
}

const updateStatus = computed(() => {
  return function (editor) {
    let status = false;
    if (roleType.value) {
      status = true;
    } else {
      status = editor === userId.value;
    }
    return status;
  };
});
const fileVisible = ref(false);
function batchUpFile() {
  fileVisible.value = true;
}
function offFileModal(type) {
  fileVisible.value = false;
  if (type) {
    getTbodyData();
  }
}
onMounted(async () => {
  await getSearchData();
  await getFormList();
  await getTheadData();
  await getTbodyData();
});
</script>

<style scoped lang="less">
.intent-mining-page {
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  font-size: 14px;
  color: #464c5b;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    rgba(250, 251, 255, 1) 0%,
    rgba(243, 245, 251, 1) 99%
  );
  .search {
    width: 100%;
    margin: 15px 0;
    border-radius: 4px;
    padding: 15px;
    background-color: #fff;
    box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.15);
  }
  .btn {
    padding-left: 20px;
    display: flex;
    column-gap: 20px;
    justify-content: flex-end;
    background-color: #fff;
    .btn-item {
      color: #1067ee;
      cursor: pointer;
      &:hover {
        text-decoration: underline;
      }
    }
  }
}
.title {
  display: flex;
  width: 80%;
  position: relative;
  align-self: center;
  color: rgba(36, 104, 242, 1);
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  padding: 15px;
  margin-left: 140px;
  border-bottom: 1px rgba(36, 104, 242, 1) solid;

  .iconTip {
    font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC",
      sans-serif;
    font-weight: 650;
    font-style: normal;
    font-size: 20px;
    color: #4e5969;
    text-align: center;
    width: 94%;
  }
  .img {
    margin-left: auto;
    color: #2f54eb;
    width: 28px;
    height: 26px;
  }
}
.table-paging {
  background-color: #fff;
  padding: 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
/deep/ .ant-modal-title {
  font-weight: 700;
}
</style>
